<template>
  <div>
    <view
      v-if="pageData && pageData.app_path_set_dt.length > 0"
      class="member-equity-wrap card-wrap"
      :style="{
        backgroundColor: pageData.bg_color || '#FFF'
      }"
    >
      <view class="card-title" :style="{color: pageData.color || '#000'}">{{ pageData.title || '会员权益' }}</view>
      <view class="modules-wrap">
        <view v-for="item in pageData.app_path_set_dt" :key="item.id" class="module" @click="onAction(item)">
          <u-image :src="getIconUrl(item.image)" mode="heightFix" :lazy-load="true" width="18" height="18" />
          <view class="title" :style="{color: item.color}">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view v-else />

    <u-popup :show="popupShow" mode="center" :round="10" :safe-area-inset-bottom="false" @close="popupShow = false">
      <view class="popup-content">
        <view class="title">青丝几何 发量小官</view>
        <u-image :src="barcodeImg" width="200" height="200" />
        <view class="desc">长安二维码添加你的发量守护官</view>
      </view>
    </u-popup>
  </div>
</template>

<script>
import {
  getImg,
  getCurrentPageConfigByName,
  execFn
} from '../../../utils/index'
import barcodeTestImg from '@/static/images/barcode-test.png'
export default {
  name: 'MakeCoins',
  data() {
    return {
      pageData: null,
      popupShow: false,
      barcodeImg: barcodeTestImg
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('会员权益').then(res => {
        _this.pageData = res
        console.log('会员权益---模块配置数据')
        console.log(res)
      })
    },
    getIconUrl(params) {
      return getImg(params)
    },
    onAction(data) {
      const {
      	url
      } = data
      if (url) {
      	if (url == 'qyQrcodePopup') {
      		this.popupShow = true
      		return
      	}
      	execFn(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.member-equity-wrap {
		margin-bottom: 20rpx;

		.card-title {
			font-size: 32rpx;
			font-weight: bolder;
			padding-bottom: 26rpx;
			border-bottom: 1px solid #e6e6e6;
		}

		.modules-wrap {
			display: flex;
			flex-wrap: wrap;

			.module {
				width: 25%;
				padding: 5rpx;
				border-radius: 10rpx;
				margin-top: 25rpx;
				@include flex-column-center;
				flex-flow: column;

				&:active {
					background-color: #e6e6e6;
				}

				.title {
					padding-top: 15rpx;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}

	.popup-content {
		width: 80vw;
		height: 40vh;
		padding: 0 20rpx;
		@include flex-center;
		flex-flow: column;

		.title {
			font-size: 32rpx;
			padding-bottom: 40rpx;
		}

		.desc {
			font-size: 32rpx;
			padding-top: 30rpx;
		}
	}
</style>
